<template>
  <div class="loading-container-monitor loading-outer" v-if="visible">
    <div class="loading fadeIn animated">
      <div class="spinner spinner-ios">
        <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
              <stop :stop-color="color" stop-opacity="0.6" offset="0%" />
              <stop :stop-color="color" stop-opacity=".631" offset="63.146%" />
              <stop :stop-color="color" offset="100%" />
            </linearGradient>
          </defs>
          <g fill="none" fill-rule="evenodd">
            <g transform="translate(1 1)">
              <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
                <animateTransform
                  attributeName="transform"
                  type="rotate"
                  from="0 18 18"
                  to="360 18 18"
                  dur="0.9s"
                  repeatCount="indefinite"
                />
              </path>
              <circle :fill="color" cx="36" cy="18" r="1">
                <animateTransform
                  attributeName="transform"
                  type="rotate"
                  from="0 18 18"
                  to="360 18 18"
                  dur="0.9s"
                  repeatCount="indefinite"
                />
              </circle>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
function preventDefault(e) {
  e.preventDefault();
}

export default {
  name: 'loading',
  props: {
    color: {
      type: String,
      default: '#fd236b', // '#0185F2'
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    show() {
      if (typeof window === 'undefined') return;
      this.visible = true;
      document.body.addEventListener('touchmove', preventDefault);
    },
    hide() {
      if (typeof window === 'undefined') return;
      this.visible = false;
      document.body.removeEventListener('touchmove', preventDefault);
    },
  },
};
</script>

<style lang="less" scoped>
@import './style.less';
.loading-outer {
  .loading {
    background-color: transparent;
  }
}
</style>

